<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课堂随机抽问</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            font-family: 'Microsoft Yahei', Arial, sans-serif;
        }

        #nameDisplay {
            font-size: 4rem;
            margin: 2rem;
            padding: 1.5rem 3rem;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            min-width: 400px;
            text-align: center;
            color: #2c3e50;
            transition: all 0.3s ease;
        }

        #drawButton {
            padding: 1rem 2.5rem;
            font-size: 1.2rem;
            border: none;
            border-radius: 25px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1.5rem;
        }

        #drawButton:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        #drawButton:disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .container {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="nameDisplay">点击开始抽选</div>
        <button id="drawButton" onclick="startDraw()">开始抽选</button>
    </div>

    <script>
        // 修改点1：姓名存储在字符串中用换行符分隔
const studentsStr = `蔡子鱼
柴嘉浩
常嘉屹
杜禹墨
杜政宇
桂若桐
刘铠嘉
刘堃胤
刘逸辰
刘雨珈
逯浩轩
秦润珩
唐维政
王睿涵
王宇程
王宇鹏
吴禹成
夏梓轩
谢翼霖
杨彭越
杨雨泽
张子恒
赵奕涵
赵子成
张益嘉
李续宁
赵霆曦
钟意
高景怡
高欣然
高馨心
贾静怡
康雨轩
李语璇
刘岱雯
刘雨含
刘禹含
卢艺文
路骞予
马雨畅
宋美仪
王浩雯
王潇萌
杨曙宁
杨译涵
张芯源
张欣妍
赵子慕
左晟瑶
张益萌
林苗果
周子优`;
        
        // 转换字符串为数组
        const students = studentsStr.split('\n');

        let isDrawing = false;
        let drawInterval;

        function startDraw() {
            if (isDrawing) return;
            
            isDrawing = true;
            const button = document.getElementById('drawButton');
            const display = document.getElementById('nameDisplay');
            button.disabled = true;
            display.style.color = '#2c3e50'; // 重置颜色

            // 修改点2：使用精确的5秒定时器
            drawInterval = setInterval(() => {
                const index = Math.floor(Math.random() * students.length);
                display.textContent = students[index];
            }, 50);

            // 5秒后必定停止
            setTimeout(() => {
                clearInterval(drawInterval);
                isDrawing = false;
                button.disabled = false;
                
                // 结果强调效果
                display.style.color = '#e74c3c';
                display.style.transform = 'scale(1.1)';
                setTimeout(() => {
                    display.style.transform = 'scale(1)';
                }, 200);
            }, 3000);
        }
    </script>
</body>
</html>